<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <script src="../../js/vue/vue.js"></script>
    <script src="../../js/jquery/jquery.js"></script>
</head>
<body>
<div id="app">
    <a href="add.html">新增</a>
    <ul>
        <li v-for="brand in brands">{{brand.id}}-{{brand.brandName}}-{{brand.brandEncoding}}
            <a :href="'edit.html?id='+brand.id">编辑</a>
            <button id="btn" @click="removeById(brand.id)">删除</button>
        </li>
    </ul>
</div>
<script>
    var vue =new Vue({
        el:"#app",
        data:{
            brands:[]
        },
        mounted:function () {
            //发送请求加载数据
            var _this=this;
            $.get("http://localhost:8080/brands/list",{},function (data) {
                console.log(data);
                if(data.code==200){
                    _this.brands=data.data
                }else {
                    alert(data.msg);
                }
            })
        },
        methods:{
            removeById:function (id) {
                $.get("http://localhost:8080/brands/delete",{id:id},function (data){
                    if(data.code==200){
                        window.location.href="http://localhost/view/brand/list.html"
                    }
                })
            }
        }
    });
</script>
</body>
</html>